<template>
  <div class="app">
    <Head :name="name"></Head>
    <div class="img">
      <img :src="'http://124.93.196.45:10001/'+list.imgUrl" alt="">
    </div>
    <div style="width:98%;margin:auto;background:white;border-radius:15px;padding:10px 0" >
<p class="name">{{list.name}}</p>
<p class="businessHours">营业时间：{{list.businessHours}}</p>
<p class="introduce">{{list.description}}</p>
    </div>
    <h2 class="ikun">小黑子评论区</h2>
    <van-field
  v-model="message"
  rows="2"
  autosize
  label="添加评论"
  type="textarea"
  maxlength="50"
  placeholder="请开始你的表演"
  show-word-limit
/>
<van-button type="primary" size="mini" color="rgb(8, 98, 166)" class="btn" @click="up">提交评论</van-button>
    <div v-for="item in commentlist" :key="item.id" class="comment" >
    <div class="content"><span class="user">某ikun:</span> {{item.content?item.content:kong}}</div>
  </div>
  <van-pagination v-model="currentPage" :total-items="length" :items-per-page="5" style="margin-top:50px"/>
  </div>
</template>

<script>
import  Head  from "./libraryView/headView.vue"
import { libraryDetail,commentlist,postcomment } from "./service"
export default {
  components:{
Head
  },
  data(){
    return {
      list:[],
      name:'详细信息',
      commentlist:[],
      kong:"这里的废话被我关了",
      currentPage:1,
      message:'',
      length:0
    }
  },
async created(){

let res= await libraryDetail(this.$route.query.id)
this.list=res.data.data

},
watch:{
  
  currentPage:{
    async handler(){
    let res2=await commentlist(
  {
    libraryId:this.$route.query.id,
    pageNum:this.currentPage,
    pageSize:10
  },
  
  );
  // console.log(res2);
this.commentlist=res2.data.data
  },
  deep:true,
  immediate:true,
},
  
},
methods:{
  async up(){
let res = await postcomment({
  libraryId:this.$route.query.id,
  content:this.message
})
console.log(res);
window.location.reload()
  }
}
}
</script>

<style lang="scss" scoped>
.app{
margin: 0;
padding: 0;

.img{
  height: 300px;
  width: 100%;
  overflow: hidden;
  position: relative;
  img{
    width: 100%;
    position: absolute;
    top: -50px;
    height: 100%;
    // left: 10%;
  }
}
.name{
  margin: 10px;
  padding: 0;
color: red;

}
.businessHours{
  margin: 10px;
  margin-top: 20px;
  padding: 0;
  font-size: 20px;

}
// .shippingMethod{
//   margin: 10px;
//   padding: 0;
//   font-size: 20px;

// }
.introduce{
  font-size: 18px;
  // border: 1px solid #999;
  color: rgb(110, 108, 108);
  padding: 10px;
}
h2{
  margin-left: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.btn{
  float: right;
}
.comment{
  // line-height: 40px;
  height: 60px;
  margin:30px auto;
  width: 90%;
  padding: 10px;
  // border: 1px solid rgb(42, 40, 40);
  border-radius: 15px;
  font-size: 20px;
  background-color: rgb(235, 244, 249);
  .user{
    font-size: 18px;
    color: red;
  }
}
}
</style>